<template>
  <div id="login">
		<transition appear appear-active-class="fade-active">
				<div class="container">
		<form class="login-form">
			<p class="TopTip">登录</p>
			<input type="text" placeholder="用户名" v-model="username" >
			<i class="iconfont iconxingmingyonghumingnicheng"></i>
			<input type="password" placeholder="密码" v-model="password" >
			<i class="iconfont iconmima"></i>
			<button @click.prevent="login">
				<span v-show="loginTip">登录</span>
				<img v-show="loginLoading" src="../../assets/loading-svg/loading-spokes.svg" alt="">
        <span v-show="loginStatusError" style="color:red">用户名或密码错误,请重新登录</span>
			</button>
			<button @click.prevent="$router.push('/register')">注册</button>
			<button @click.prevent="$router.push('/index')">不想登录，回去吧</button>
		</form>
	</div>
		</transition>
  </div>
</template>

<script>
// import BG from './bg'
import {state} from "../../store.js"
import jwt from "jwt-decode"

export default {
	components:{
		// BG
	},
	data(){
		return {
			username:"",
			password:"",
			loginTip:true,
			loginLoading:false,
			loginStatusError:false,
			showBG:false
		}
	},
	methods: {
		login(){
			this.loginLoading=true;
			this.$axios.post("/user/login",{
				username:this.username,
			  password:this.password
			}).then(res=>{
				console.log(res);
				if(res.data.error===0){
					this.loginStatusError=true
					this.loginTip=false
					setTimeout(()=>{
						this.loginStatusError=false
					this.loginTip=true
					},2000)
				}else{
					const decode=jwt(res.data.data.token)
					localStorage.setItem("LoginToken",res.data.data.token)
					this.$store.dispatch("setUser",decode)
					this.$store.dispatch("setToken",this.isEmpty(decode))
					this.username=""
					this.password=""
					state.isLogin=true
					this.$router.push("/")
				}				
			})
			this.loginLoading=false
		},
		  isEmpty(value){
        if(value==""||Object.values(value).length==0||value==undefined||Object.keys(value).length==0){
          return false
        }else{
          return true
        }
      }
	},

}
</script>

<style lang="less" scoped>

// 	@font-face {
//     font-family:"iconfont";
//     src: url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.eot?t=1595250028468');
//     /* IE9 */
//     src: url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.eot?t=1595250028468#iefix') format('embedded-opentype'),
//     /* IE6-IE8 */
//     url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO4AAsAAAAAB4gAAANrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCXIJTATYCJAMMCwgABCAFhG0HShutBhHVmyHI/pTcNgvWrP5AVbDQ9lgrgZnXxQuveyCaFF8YMvmNmvDX6ZOyATPzmOCffr927rN1hSQa6SJexUNiSGTPTPdSSIG+ISHxz/+5ftgqvHRAe+PWAp4OrwK8wBrw8OjsB93RaYGNB/6PvffFr5yNBzKgaN7xDKFvW+O8cTRtwACK4vH2XXuR5TgD/QnlUI7VB0rbHLUvzQ3kNGqDSi4AdHKQhGkiKcShtaAgiumrWdo6/zVAwJDwxkBCFZcHCP8NMInn+n8OlzaWwJjfslzmGM+jXhTHAQU09iK7AzkgP5Xwam7QY7B3QyCpWwCOTy5vU+bogwS0vXF2QDmh5ypKJU5CwcxMx2BaPO6gLzDGk/f7+gWFGIZP9JHrqzPHDH/4HybN+hstBwEEw1kBcR5YMALgoNlC+74UxEdgyY88V+cGjpihQv97/K8yLPQfz0BFenEawAASBp1DiwWhY+ZgAFgAgZKX8AJ1uetarr+uFel6zptXVj+T8oVWjrSW5AbEGmMdN8v5OoZVWGO26hNxYtOJ1p37adginaS+cnLV09xDM+U1tbp3bsxvBsy6/dS4ucrL/u3u5flueb2XK9dxcHp6bUuiwIHGTIZT0PLTrj8Wpnu/nZgECxxYwljZzETwXu8QksDVaBC1JPe1vgvY7u9fZHBYC9F06TKeq4wsW7NeDxCzCDvzx4rlkyVIAsfBqOnT/+1wvVHpj/6Gf9U9YW9w/c670/OwuYrb7i30AKLSH9ZLPr3i61f0N1wNlY+6avRXLQP4bt4EfFF5rLmR+Ak4hBciaFjhviLdYLPGt/h/hzUd82IAruQioruLXt2VlcbFIHGVCIyYLrDiepAOOwJeyigEcWOQNCyZn1LSSZQrYMiaQPKuYGR9gZX3QDrsE7yqDwT5CJJ2g7liSl82LRwz9gVHMHgGGtpEmSZZ8EuvUadRn+Mij3qP7CkE+UwunTrHBHmIMf5BF0QUKLYxnNF+GEUWHNsAh5IxIq6RzaqiL2WGNh5bcMzYFxyBwTOgoU2UU18WMj9/jTqN+lxR9sN+j+ypeZCXkWuAPJcnjcou5R7/oAtEFFBsY3BGVoyMuAWuuFuAQ8kwHaKuIcuqqabyzPTK+P42QJU+JhVDCtnGKNGxRXi2OpMGkYSGBt3cqZji/tgYAA==') format('woff2'), url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.woff?t=1595250028468') format('woff'), url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.ttf?t=1595250028468') format('truetype'),
//     /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
//     url('//at.alicdn.com/t/font_1955890_32dcvjax5r9.svg?t=1595250028468#iconfont') format('svg');
//     /* iOS 4.1- */
// }
@font-face {
  font-family: "advice";
  src: url("../../assets/font/advice (2).woff");
  src: url("../../assets/font/advice (2).woff") format("woff");
}
.iconfont {
    font-family:"iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.iconxingmingyonghumingnicheng:before {
		content:"\e623";
		position: absolute;
		right: 54px;
		top: 100px;
}
.iconmima:before {
		content:"\e668";
		position: absolute;
		right: 54px;
		top: 155px;
}
.TopTip{
	font-family: advice;
	font-size: 35px;
}

	.container{
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		// box-sizing: content-box;	

	}
	.login-form{
		// border-radius: 15px;
		width: 400px;
		height: 300px;
		display: flex;
		flex-direction: column;
		padding: 40px;
		text-align: center;
		position: relative;
		z-index: 100;
		overflow: hidden;
	}
	.login-form::before{
		content: "";
		// border-radius: 15px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		box-shadow: inset 0 0 0 200px rgba(255,255,255,0.25);
		position: absolute;
		top: -10px;
		left: 4px;
		z-index: -1;
		filter: blur(6px);
		overflow: hidden;
		}
		.login-form h2{
			font-size: 18px;
			font-weight: 400;
			color: #333;
		}

		.login-form input,.login-form button{
			margin:12px 0;
			height:36px;
			border: none;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 4px;
			padding: 0 14px;
			color: #333;
		}
		.login-form input::placeholder{
			color: #3d5245;
		}
		.login-form button{
			margin-top: 8px;
			background-color: rgba(57, 88, 69, .4);
			color:white;
			position: relative;
			overflow: hidden;
			cursor: pointer;
			transition: 0.4s;
		}
		.login-form button:hover{
			background-color: rgba(12, 80, 38, 0.67);

		}
		//生成before印记
		.login-form button::before,.login-form button::after{
			content:"";
			display: block;
			width: 80px;
			height: 100%;
			background-color: rgba(179, 255, 210,0.5);
			opacity: 0.5;
			position: absolute;
			left:0;
			top: 0;
			transform: skewX(-15deg);
			filter: blur(30px);
			overflow: hidden;
			transform: translateX(-100px);
		}
		//生成after印记
		.login-form button::after{
			width: 40px;
			background-color: rgba(179, 255, 210, 0.3);
			left:60px;
			filter: blur(5px);
			opacity: 0;
		}
		//鼠标移动到按钮上 印记移动
		.login-form button:hover::before{
			transition: 1s;
			transform: translateX(320px);
			opacity: 0.7;
		}
		.login-form button:hover::after{
			transition: 1s;
			transform: translateX(320px);
			opacity: 1;
		}
		.fade-active{
			opacity: 0;
			animation: leave .5s linear  ;
		}	
				@keyframes leave{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
</style>